import { PlusOutlined } from '@ant-design/icons';
import {
  ActionType,
  ModalForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-components';
import { FormattedMessage, useRequest } from '@umijs/max';
import { Button, message } from 'antd';
import { FC } from 'react';
import { OrganizationModel } from '../data';
import { createPosition } from '../service';

interface EditFormProps {
  reload?: ActionType['reload'];
  record?: any[];
}

const EditForm: FC<EditFormProps> = (props) => {
  const { reload, record } = props;

  const [messageApi, contextHolder] = message.useMessage();

  /* const intl = useIntl(); */

  const { run, loading } = useRequest(createPosition, {
    manual: true,
    onSuccess: () => {
      messageApi.success('Added successfully');
      reload?.();
    },
    onError: () => {
      messageApi.error('Adding failed, please try again!');
    },
  });

  return (
    <>
      {contextHolder}
      <ModalForm
        title="新建职位"
        trigger={
          <Button type="primary" icon={<PlusOutlined />}>
            <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
          </Button>
        }
        width="400px"
        modalProps={{ okButtonProps: { loading }, centered: true }}
        onFinish={async (value: OrganizationModel.organizationResponse) => {
          await run(value);

          return true;
        }}
      >
        <ProFormText
          rules={[
            {
              required: true,
              message: '职位名称',
            },
          ]}
          width="md"
          name="name"
          label="职位名称"
        />
        <ProFormSelect
          name="parentCode"
          label="上级职位"
          width="md"
          showSearch
          options={record}
          placeholder="请选择"
        />
        <ProFormTextArea width="md" name="description" label="职位描述" />
      </ModalForm>
    </>
  );
};

export default EditForm;
